feat: modernize progress indicators to latest Material Design specs#4995
feat: modernize progress indicators to latest Material Design specs#4995adrcotfas wants to merge 5 commits into
Conversation
|
React Native SVG is quite heavy and can cause performance issues. I'd avoid depending on it. Is it possible to use something like https://github.com/software-mansion-labs/react-native-nano-icons to convert these shapes to fonts and use them? Maybe some masking could help with the edges, tho seems very tricky. |
|
Maybe we can use variable fonts and manipulate the font metrics to perform the animation. Thanks to @stachbial for the idea. I'll do some experimentation with it. |
|
Hey @satya164, do you want me to explore your suggestion or will you take it over since you showed me an alternative implementation? |
|
@adrcotfas the font approach won't work with react native because it doesn't expose the necessary style properties to customize variable fonts. and i'm not keen on adding |
Simulator.Screen.Recording.-.iPhone.16e.-.2026-06-11.at.16.59.00.mov
Motivation
Replace the legacy ProgressBar and ActivityIndicator with a token-driven
Material Design 3 progress indicator family. Four components cover the
linear and circular shapes, each in a standard and an expressive "wavy"
variant, with determinate and indeterminate modes.
LinearProgressIndicatorandCircularProgressIndicator(standard)and
LinearWavyProgressIndicatorandCircularWavyProgressIndicator(expressive wave), built on react-native-svg with shared spec tokens.
progressaccepts a number or a ReanimatedSharedValue<number>, so acaller-animated value glides on the UI thread with no re-renders.
sweep for circular; two-segment travel for linear).
amplitude,wavelength, andwaveSpeedare configurable. Wave geometryis computed in worklets (
wavePath.ts).to the standard indeterminate
CircularProgressIndicator.react-native-svgas a dependency (peer >= 15.0.0).BREAKING CHANGE: The progress components were redesigned for MD3 with no deprecation aliases.
ProgressBarandProgressBarPropsare removed. UseLinearProgressIndicator(orLinearWavyProgressIndicator). Theprogressprop is the same 0..1 range;indeterminatereplaces the oldindeterminate behavior.
ActivityIndicatorandActivityIndicatorPropsare removed. UseCircularProgressIndicator indeterminate.Related issue
Test plan